import Vue from 'vue'
import Vuex from 'vuex'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    listItmes: JSON.parse(localStorage.getItem("todos") || "[]"),
    // listItmes: [
    //   {
    //     id: 1,
    //     text: "aaaaa",
    //     checked: false,
    //   },
    //   {
    //     id: 2,
    //     text: "bbbbbb",
    //     checked: false,
    //   },
    //   {
    //     id: 3,
    //     text: "ccccc",
    //     checked: false,
    //   },
    //   {
    //     id: 4,
    //     text: "ddddd",
    //     checked: false,
    //   },
    // ],
    listState: "all", //all active completed
  },
  //相当于计算属性
  getters:{
    isHaveList:function(state){
      if(state.listItmes.length === 0){
        return true;
      }else{
        return false;
      }
    },
    updataListItmes:function(state){
      if (state.listState === "all") {
        return state.listItmes;
      } else if (state.listState === "active") {
        return state.listItmes.filter(v => {
          return !v.checked;
        });
      } else if (state.listState === "completed") {
        return state.listItmes.filter(v => {
          return v.checked;
        });
      }
    },
    autoNum: function (state) {
      let num = 0;
      state.listItmes.map((v) => {
        if (!v.checked) {
          num++;
        }
      });
      return num;
    },
    allSelectState: function (state) {
      let checked = true;
      state.listItmes.map((v) => {
        if (!v.checked) {
          checked = false;
        }
      });
      return checked;
    },
  },
  mutations: {
    clearCompleted:function(state){
      let newListItmes = state.listItmes.filter((v) => {
        return !v.checked;
      });
      state.listItmes = newListItmes;
    },
    deleteList:function(state,{payload}){
      state.listItmes.splice(payload.index, 1);
    },
    handleClickState:function(state,{payload}){
      state.listState = payload.status;
    },
    allSelect:function(state,{payload}){
      let newListItme = JSON.parse(JSON.stringify(state.listItmes));
      if (!payload.allSelectState) {
        newListItme.map((itme) => {
          itme.checked = true;
        });
      } else {
        newListItme.map((itme) => {
          itme.checked = false;
        });
      }
      state.listItmes = newListItme;
    },
    getInputVal:function(state,{payload},getters){
      if (!payload.inputValue) {
        // this.$message({
        //   message: "输入不能为空！",
        //   type: "warning",
        // });
        return false;
      }
      let obj = {
        id: Date.now(),
        text: payload.inputValue,
        checked: false,
      };
      state.listItmes.push(obj);
    },
  },
  actions: {
  },
  modules: {
  }
})
